<template>
  <DraggableModal :visible="props.showModal" :title="`${props.data.id ? '修改' : '新增'}冻存盒类型`" width="600px"
    @cancel="modalCancelFn">
    <Form ref="formRef" :model="state.data" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 10 }">
      <a-form-item :label="$t('specimen.Box_type')" name="serial">
        <Input v-model:value="state.data.serial" placeholder="盒类型" />
      </a-form-item>
      <a-form-item label="盒颜色" name="color">
        <Select v-model:value="state.data.color" style="width: 100%" placeholder="盒颜色" :options="colorList" />
      </a-form-item>
      <a-form-item label="盒规格（行）" name="rows">
        <InputNumber min="1" v-model:value="state.data.rows" />
      </a-form-item>
      <a-form-item label="盒规格（列）" name="cols">
        <InputNumber min="1" v-model:value="state.data.cols" />
      </a-form-item>
      <a-form-item :label="`${$t('specimen.test_tube')}冒距盒顶端高度(mm)`" name="distance">
        <InputNumber min="0" v-model:value="state.data.distance" />
      </a-form-item>
      <a-form-item label="描述" name="desp">
        <Input v-model:value="state.data.desp" />
      </a-form-item>
    </Form>

    <template #footer>
      <Button @click="modalCancelFn">取消</Button>
      <Button type="primary" @click="modalOkFn">保存</Button>
    </template>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { reactive, watch, ref } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { Form, Input, Select, InputNumber, message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import { boxAdd, boxUpdate } from '@/api/base/box_data';
import { colorList } from '@/modules/underlying-data/pages/container-type/columns';

type State = {
  data: any;
  saveLoading: boolean;
};

const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.data,
  () => {
    state.data = props.data;
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'boxTypeModalOk'): void;
}>();
const formRef = ref<FormInstance>();
/**
 * data
 */
const state: State = reactive({
  data: {},
  saveLoading: false,
}) as State;
const rules = {
  serial: [{ required: true, message: '数据必填', trigger: 'blur' }],
  color: [{ required: true, message: '数据必填', trigger: 'change' }],
  rows: [{ required: true, message: '数据必填', trigger: 'change', type: 'integer' }],
  cols: [{ required: true, message: '数据必填', trigger: 'change', type: 'integer' }],
  distance: [{ required: true, message: '数据必填', trigger: 'change', type: 'number' }],
};

/**
 * add/edit modal
 */
const modalCancelFn = () => {
  emits('update:showModal', false);
  formRef.value?.clearValidate();
};
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return message.warn('数据有误，请检查后重试！');
  }
  let params: any = {
    serial: state.data.serial,
    color: state.data.color,
    rows: state.data.rows,
    cols: state.data.cols,
    distance: state.data.distance,
    desp: state.data.desp,
  };
  if (state.data.id) {
    params.id = state.data.id;
    await boxUpdate(params);
  } else {
    await boxAdd(params);
  }
  message.success('保存成功！');
  modalCancelFn();
  emits('boxTypeModalOk');
};
</script>

<style scoped lang="less"></style>
